<template>
    <div>
        <el-container style="height:100%">
            <el-aside :width="isCollapse?'64px':'201px'">
                <el-menu
                    :default-active="this.$route.path"
                    class="el-menu-vertical-demo"
                    background-color="#304156"
                    text-color="rgb(191, 203, 217)"
                    active-text-color="#ffd04b"
                    :collapse="isCollapse"
                    :router="true"
                    :collapse-transition="false"
                >
                    <el-menu-item index="/admin/">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">后台首页</span>
                    </el-menu-item>
                    <el-submenu index="1-1">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item index="/admin/1">用户列表</el-menu-item>
                        <el-menu-item index="/admin/2">添加用户</el-menu-item>
                        <el-menu-item index="/admin/3">删除用户</el-menu-item>
                    </el-submenu>
                    <el-submenu index="1-2">
                        <template slot="title">
                            <i class="el-icon-reading"></i>
                            <span>书籍管理</span>
                        </template>
                        <el-menu-item index="/admin/4">书籍列表</el-menu-item>
                        <el-menu-item index="/admin/5">添加书籍</el-menu-item>
                    </el-submenu>
                    <el-submenu index="1-3">
                        <template slot="title">
                            <i class="el-icon-s-comment"></i>
                            <span>评论管理</span>
                        </template>
                        <el-menu-item index="/admin/6">评论列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="1-4">
                        <template slot="title">
                            <i class="el-icon-document"></i>
                            <span>日志管理</span>
                        </template>
                        <el-menu-item index="/admin/7">登录日志</el-menu-item>
                        <el-menu-item index="/admin/8">操作日志</el-menu-item>
                    </el-submenu>
                    <el-submenu index="1-5">
                        <template slot="title">
                            <i class="el-icon-edit"></i>
                            <span>网站管理</span>
                        </template>
                        <el-menu-item index="/admin/9">基本信息</el-menu-item>
                        <el-menu-item index="/admin/10">数据统计</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="height:100px">
                    <div
                        style="text-align: right; font-size: 12px;height:50px;border-bottom:1px solid #eee;margin-bottom:10px;"
                    >
                        <span
                            :class="!isCollapse?'el-icon-s-fold':'el-icon-s-unfold'"
                            style="float:left; font-size:25px;line-height:50px;"
                            @click="change"
                        ></span>

                        <span
                            class="el-icon-s-home"
                            style="float:left;margin-left:20px; font-size:25px;line-height:50px;"
                        ></span>
                        <div>
                            <div
                                style="font-size:16px;float:right;line-height:50px;margin-left:15px;"
                            >
                                <span>你好，臧豪！</span>
                                <el-dropdown>
                                    <i
                                        class="el-icon-setting"
                                        style="margin-left: 15px;font-size:18px;"
                                    ></i>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>
                                            <p>退出登录</p>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                            <div style="float:right;">
                                <el-avatar shape="square" :size="50" :src="avatarurl"></el-avatar>
                            </div>
                        </div>
                    </div>
                    <el-row>
                        <el-tag
                            :closable="!checkHome(item.path)"
                            v-for="(item,index) in visitedRoutes"
                            :key="index"
                            :disable-transitions="false"
                            @close="handleClose(item)"
                            @click="route(item.path)"
                            :effect="checkPath(item.path)"
                        >{{item.name}}</el-tag>
                    </el-row>
                </el-header>

                <el-main>
                    <transition name=".el-zoom-in-center">
                        <router-view></router-view>
                    </transition>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            isCollapse: false,
            avatarurl:
                "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3375420028,3970488305&fm=26&gp=0.jpg",
        };
    },
    methods: {
        checkPath(path) {
            if (this.$route.path === path) return "dark";
            return "plain";
        },
        checkHome(path) {
            return path === "/admin/";
        },
        change() {
            this.isCollapse = !this.isCollapse;
        },
        handleClose(item) {
            this.$store.commit("removeTagRoutes", item);
            this.$router.push(
                this.visitedRoutes[this.visitedRoutes.length - 1].path
            );
        },
        route(path) {
            this.$router.push(path);
        },
    },
    computed: {
        ...mapGetters(["visitedRoutes"]),
    },
};
</script>
<style scoped>
.tagRoute {
    color: black;
    background-color: #ffffff;
    border: 1px solid #d8dce5;
    height: 35px;
}
.tagRoute:hover {
    color: cornflowerblue;
}
.el-tag {
    margin-left: 10px;
}
.active {
    color: #ffffff !important;
    background-color: #1890ff;
}
.el-header {
    background-color: #ffffff;
    color: #333;
    border-bottom: 1px solid #d8dce5;
}
.el-aside {
    color: #333;
    min-height: 100vh;
}
.el-menu {
    border-right: none;
    min-height: 100vh;
}
</style>
